<template>
  <u-popup v-model="show" mode="bottom" height="75%" :border-radius="30">
    <view class="poup-content">
      <view class="header">
        <image :src="goods.cover" class="image"></image>
        <view class="price-stock">
          <view class="price">
            <view>￥</view>
            <view>{{ choose_item.price }}</view>
          </view>
          <view class="stock">库存 {{ choose_item.storage }}</view>
        </view>
      </view>
      <!-- 规格 -->
      <view class="kinds">
        <view class="kinds-title">规格</view>
        <u-row gutter="16" justify="space-between">
          <u-col
            span="6"
            v-for="(item, index) in goods.items"
            :key="index"
            @click="changeItem(item)"
          >
            <view
              :class="[
                choose_item.goods_item_id == item.goods_item_id
                  ? 'choose_item'
                  : 'kind',
                'u-line-1',
              ]"
            >
              {{ item.title }}
            </view>
          </u-col>
        </u-row>
      </view>
      <!-- 数量 -->
      <view class="number">
        <view>数量</view>
        <view class="stock">
          <view
            class="iconfont icon-jian"
            style="font-size: 46rpx; margin-right: 40rpx; color: #cfcfcf"
            @click="reduce"
          ></view>
          <view style="font-size: 36rpx">{{ choose_item.buyNum }}</view>
          <view
            class="iconfont icon-add-fill"
            style="font-size: 50rpx; color: #d95c48; margin-left: 40rpx"
            @click="add"
          ></view>
        </view>
      </view>
    </view>
    <!-- 确定 -->
    <view style="position: fixed; bottom: 36rpx; width: 100%; padding: 0 35rpx">
      <u-button
        :custom-style="customStyle"
        :ripple="true"
        ripple-bg-color="#DB5A4C"
        shape="circle"
        @click="addCar"
        >确定</u-button
      >
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    goods: Object,
    merchant_id: Number,
  },
  data() {
    return {
      show: false,
      customStyle: {
        color: "#FFFFFF",
        backgroundColor: "#DB5A4C",
      },
      choose_item: {},
      items: [],
    };
  },
  watch: {
    goods: {
      handler(newV, oldV) {
        // 默认选择第一个
        this.choose_item = newV.items[0];
        console.log(this.choose_item);
      },
    },
  },
  methods: {
    /**
     * 改变sku
     * @param {Object} item
     */
    changeItem(item) {
      this.choose_item = item;
    },
    /**
     * 设置购物车
     */
    setCar(data) {
      var from = {
        merchant_id: this.merchant_id,
        goods_list: data,
      };
      this.$u.api
        .setCarApi(from)
        .then((res) => {
          // this.$u.vuex("vuex_car_list", []);
        })
        .catch((error) => {
          this.$u.toast(error.message);
        });
    },
    /**
     * 添加购物车
     */
    async addCar() {
      if (this.choose_item.buyNum === 0) {
        return this.$u.toast("数量不能为0");
      }
      console.log(this.vuex_car_list);
      var buy_car = this.vuex_car_list;
      var isExit = false;
      buy_car.map((v) => {
        if (v.goods_item_id === this.choose_item.goods_item_id) {
          // 判断是否超出库存
          if (this.choose_item.storage >= this.choose_item.buyNum) {
            v.number = this.choose_item.buyNum;
            // 更新spu数量
          } else {
            this.$u.toast("库存不足！");
          }
          isExit = true;
        }
      });
      if (!isExit) {
        buy_car.push({
          goods_id: this.choose_item.goods_id,
          goods_item_id: this.choose_item.goods_item_id,
          number: this.choose_item.buyNum,
          // item_pic: this.$parent.receiveData.cover,
          goods_title: this.goods.title,
          item_pic: this.choose_item.cover,
          market_price: this.choose_item.market_price,
          price: this.choose_item.origin_price,
          storage: this.choose_item.storage,
          item_title: this.choose_item.title,
        });
      }

      // await this.$store.commit('setCarList',this.buy_car)

      // 重新统计spu数量
      var spuNum = 0;
      buy_car.map((v) => {
        if (v.goods_id === this.choose_item.goods_id) {
          spuNum += v.number;
        }
      });
      this.$parent.receiveData.buyNum = spuNum;
      // 重新计算sku数量
      // 首先过滤出这个sku
      var filfter = this.$parent.receiveData.items.filter(
        (v) => v.goods_item_id == this.choose_item.goods_item_id
      );
      filfter.map((v) => {
        v.buyNum = this.choose_item.buyNum;
      });
      this.setCar(buy_car);
      uni.showToast({
        title: "添加成功",
        duration: 3000,
      });
      this.show = false;
    },
    /**
     * 减少购买数量
     */
    reduce() {
      if (this.choose_item.buyNum - 1 < 0) {
        return;
      }
      this.choose_item.buyNum -= 1;
    },
    /**
     * 添加购买数量
     */
    add() {
      if (this.choose_item.buyNum + 1 > this.choose_item.storage) {
        this.$u.toast("库存不足！");
        return;
      }
      this.choose_item.buyNum += 1;
    },
  },
};
</script>

<style scoped lang="scss">
.choose_item {
  color: #db5a4c;
  background-color: #fcecec;
  border: 2rpx solid #db5a4c;
  height: 64rpx;
  line-height: 64rpx;
  width: 300rpx;
  text-align: center;
  border-radius: 30rpx;
  margin-bottom: 12rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
.poup-content {
  padding: 41rpx 35rpx 36rpx 35rpx;
  .header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    .image {
      width: 200rpx;
      height: 200rpx;
    }
    .price-stock {
      margin-left: 43rpx;

      .price {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        color: #cd5546;
        & > view:nth-child(1) {
          font-size: 20rpx;
          margin-bottom: 8rpx;
        }
        & > view:nth-child(2) {
          font-size: 36rpx;
        }
      }
      .stock {
        font-size: 16rpx;
        color: #555555;
        float: left;
      }
    }
  }
  .kinds {
    padding: 43rpx 0;
    & > view:nth-child(1) {
      color: #000000;
      font-size: 24rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    .kind {
      height: 64rpx;
      line-height: 64rpx;
      width: 300rpx;
      text-align: center;
      background-color: #f2f2f2;
      border-radius: 30rpx;
      margin-bottom: 12rpx;
      font-size: 24rpx;
      color: #000000;
      padding: 0 20rpx;
    }
  }
  .number {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    & > view:nth-child(1) {
      color: #000000;
      font-size: 24rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
  }
}

.stock {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>
